<template>
  <div class="user">
    <div class="top">
      <div class="left">
        <i class="el-icon-s-fold"></i>
        <span>用户管理</span>
        <i class="el-icon-download"></i>
      </div>
      <div class="right">
        <i class="el-icon-refresh-right"></i>
      </div>
    </div>
    <div class="nav">
      <div class="navSelect">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="状态" class="navTitle">
            <el-select
              v-model="formInline.region"
              placeholder="状态"
              class="navipt"
            >
              <el-option label="正常" value="shanghai"></el-option>
              <el-option label="冻结" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择部门" class="navTitle">
            <el-select
              v-model="formInline.region"
              placeholder="请选择部门"
              class="navipt"
            >
              <el-option label="技术部门" value="shanghai"></el-option>
              <el-option label="市场部门" value="beijing"></el-option>
              <el-option label="测试部门" value="shanghai"></el-option>
              <el-option label="研发部门" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" class="navTitle">
            <el-input
              v-model="formInline.username"
              placeholder="请输入用户名"
              class="navipt"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" class="navTitle">
            <el-input
              v-model="formInline.usernick"
              placeholder="请输入用户昵称"
              class="navipt"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="search" @click="searchfn"
              ><i class="el-icon-search"></i
            ></el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="btns">
        <div class="btns-left">
          <button class="btn"><i class="el-icon-refresh"></i>修改密码</button>
          <button class="btn"><i class="el-icon-s-claim"></i>角色分配</button>
        </div>
        <div class="btns-right">
          <button class="btn" @click="addfn(1)">
            <i class="el-icon-plus"></i>添加
          </button>
          <el-dropdown trigger="click">
            <el-button class="btn">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>启用</el-dropdown-item>
              <el-dropdown-item>冻结</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
    <!-- 表格 -->
    <el-table :data="arrs" border style="width: 100%" height="500">
      <el-table-column fixed width="50">
        <input type="checkbox" v-model="checked" />
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="70">
      </el-table-column>
      <el-table-column prop="usernick" label="用户昵称" width="120">
      </el-table-column>
      <el-table-column prop="depart" label="所在部门" width="80">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="50"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="140"> </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"> </el-table-column>
      <el-table-column prop="time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope" class="type">
          <el-button
            @click="fn(scope)"
            type="text"
            size="small"
            style="color: #009688"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: #009688"
            @click="detailfn(scope)"
            >详细</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: #009688"
            @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑/添加弹框 -->
    <el-dialog
      :title="i == 1 ? '添加用户' : '编辑用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input
            v-model="form.usernick"
            autocomplete="off"
            placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.pw1"
            autocomplete="off"
            placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.pw2"
            autocomplete="off"
            placeholder="再一次输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在部门" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择所在部门">
            <el-option label="技术部门" value="shanghai"></el-option>
            <el-option label="测试部门" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input
            v-model="form.tel"
            autocomplete="off"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input
            v-model="form.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.text"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fnsure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详细弹框 -->
    <el-dialog title="详细信息" :visible.sync="detail">
      <table border="1" cellspacing="0" width="100%">
        <tr>
          <td>基本信息</td>
          <td></td>
        </tr>
        <tr>
          <td>用户编号</td>
          <td>{{ detailform.id }}</td>
          <td>用户账号</td>
          <td>{{ detailform.username }}</td>
        </tr>
        <tr>
          <td>所在部门</td>
          <td>{{ detailform.usernick }}</td>
        </tr>
        <tr>
          <td>电话号码</td>
          <td>{{ detailform.tel }}</td>
          <td>邮箱</td>
          <td>{{ detailform.email }}</td>
        </tr>
        <tr>
          <td>创建时间</td>
          <td>{{ detailform.time }}</td>
          <td>最后查看</td>
          <td>{{ detailform.newtime }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td></td>
        </tr>
      </table>
    </el-dialog>
    <!-- 搜索 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>没有此匹配项,您可以选择再试试</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import instance from "../../api/index";
export default {
  name: "user",
  data() {
    return {
      checked: false,
      arrs: null,
      dialogFormVisible: false,
      detail: false,
      centerDialogVisible: false,
      formLabelWidth: "120px",
      i: 0,
      formInline: {
        username: "",
        region: "",
        usernick: "",
      },
      tableData: [
        {
          username: "",
          usernick: "",
          depart: "",
          sex: "",
          tel: "",
          email: "",
          time: "",
          state: "",
        },
      ],
      form: {
        id: "",
        username: "",
        usernick: "",
        region: "",
        tel: "",
        email: "",
        sex: "",
        text: "",
      },
      detailform: {
        id: "",
        username: "",
        usernick: "",
        sex: "",
        region: "",
        tel: "",
        email: "",
        time: "",
        newtime: "",
      },
    };
  },
  methods: {
    async getData() {
      let { data } = await instance.get("/user");
      console.log(data);
      this.arrs = data.list;
    },
    // 搜索
    searchfn() {
      let newarr = this.arrs.filter((res) => {
        return (
          res.username == this.formInline.username ||
          res.usernick == this.formInline.usernick ||
          res.region == this.formInline.region
        );
      });
      if (newarr.length > 0) {
        this.arrs = newarr;
      } else {
        this.arrs = [];
        this.centerDialogVisible = true;
      }
      // console.log(newarr);
    },
    // 详细
    detailfn(row) {
      console.log(row);
      this.detail = !this.detail;
      this.detailform.username = row.row.username;
      this.detailform.usernick = row.row.usernick;
      this.detailform.id = row.row.id;
      this.detailform.region = row.row.depart;
      this.detailform.tel = row.row.tel;
      this.detailform.email = row.row.email;
      this.detailform.time = row.row.time;
      this.detailform.newtime = new Date().toISOString();
    },
    //添加
    addfn(i) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.i = i;
    },
    // 编辑事件
    fn(row) {
      console.log(row.row);
      this.form.username = row.row.username;
      this.form.usernick = row.row.usernick;
      this.form.id = row.row.id;
      this.form.region = row.row.depart;
      this.form.tel = row.row.tel;
      this.form.email = row.row.email;
      this.dialogFormVisible = !this.dialogFormVisible;
      console.log(111);
      this.i = 0;
    },
    // 删除事件
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteHomeIndex(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 确定
    fnsure() {
      this.dialogFormVisible = false;
      if (this.i == 1) return this.handleAdd();
      this.editHomeIndex();
    },
    //  添加业务
    async handleAdd() {
      // let name = this.form.username;
      // let text = this.form.usernick;
      let { data } = await instance.post("/user", this.form);
      this.form.username = "";
      this.form.usernick = "";
      this.form.id = "";
      this.form.region = "";
      this.form.tel = "";
      this.form.email = "";
      console.log(data);
      this.i = 1;
      this.getData();
    },
    // 编辑业务
    async editHomeIndex() {
      let id = this.form.id;
      console.log(id);
      let { data } = await instance.put("/user/edit/" + id, this.form);
      console.log(data);
      this.getData();
    },
    // 删除业务
    async deleteHomeIndex(index) {
      console.log(index);
      let { data } = await instance.delete("/user/delete/" + index.$index);
      console.log(data);
      this.getData();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
.user {
  width: 100%;
  height: 98%;
  padding: 20px;
  box-sizing: border-box;
  background: #eee;
}
.top {
  width: 100%;
  height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  background: #fff;
  font-size: 14px;
  color: #333;
}
.nav {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.demo-form-inline {
  padding: 0;
  margin: 0;
}
.navSelect .navTitle {
  border: 1px solid #009688;
  border-radius: 5px;
  color: #009688;
  font-weight: bold;
  background: #fff;
  padding-left: 10px;
  margin: 3px;
}
.navSelect .navipt {
  border-left: 1px solid #009688;
  /* border-color: #009688; */
}
.search {
  background: #009688;
  color: #fff;
  font-weight: bold;
}
.nav .btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.nav .btns .btn {
  background: #009688;
  border: 0;
  padding: 10px;
  color: #fff;
  margin-right: 10px;
  border-radius: 8px;
  font-weight: bold;
}
table tr {
  height: 50px;
}
table tr td {
  width: 25%;
  text-align: center;
}
</style>